<template>
  <div id="main" class="main" :style="{width: style.outerRadius, height: style.outerRadius}" />
  <div class="text">
    电器
    <span>43</span>
  </div>
</template>

<script lang='ts'>
import { onMounted, PropType } from 'vue'
import * as echarts from 'echarts'

interface Data {
  value: number;
  name: string;
}

interface Style {
  // 圆心图路径
  circleImgUrl: string;
  // 内圈半径 - 决定圆心图的大小
  innerRadius: number;
  // 外圈半径 - 决定环形图的大小
  outerRadius: number;
}

export default {
  props: {
    data: {
      type: Array as PropType<Data[]>,
      required: true
    },
    other: {
      type: Object,
      default: null
    },
    style: {
      type: Object,
      default: null
    }
  },
  setup (prop: any) {
    // 设想如果用户不传图片、传错图片的情况，如何处理
    function requireImgUrl (url:any) {
      if (!url) return ''
      let img
      try {
        // 这一步要对用户传值的处理，避免出现相对路径问题
        img = require('@/' + url.replace(/@\//, ''))
      } catch (err) {
        // 如果图片读取错误，使用错误图片
        // 支持传值，如果不传应使用线上图片代替
        img = require('@/assets/error.png')
      }
      return img
    }

    onMounted(() => {
      const style:Style = prop.style

      var chartDom = document.getElementById('main')!
      var myChart = echarts.init(chartDom)
      var option

      option = {
        tooltip: {
          // 鼠标悬停tip框
          trigger: ''
        },
        // 图表上方文本
        // legend: {
        //   top: '5%',
        //   left: 'center'
        // },

        // 圆心图片
        graphic: style ? {
          elements: [{
            type: 'image',
            style: {
              // 起初的思路也就是一个require请求传过来的值就完事，但要考虑错误情况才抽离出来函数
              image: requireImgUrl(style.circleImgUrl),
              // 默认值为 85
              width: style.innerRadius * 2 - 5 || 85,
              height: style.innerRadius * 2 - 5 || 85
            },
            // 不设置宽高定位失效
            left: 'center',
            top: 'center'
          }]
        } : '',
        color: ['rgba(13, 205, 221, 0.8)', 'rgba(255, 255, 255, 0.8)'],
        series: [
          {
            name: 'Access From',
            type: 'pie',
            // 环形厚度，不允许百分比传值，方便使用
            radius: [style.innerRadius || 45, style.outerRadius || 50],
            avoidLabelOverlap: false,
            // 取消鼠标悬停放大
            hoverAnimation: false,
            label: {
              show: false,
              position: 'center'
            },
            // 单个圆弧边框样式
            itemStyle: {
              borderRadius: 2,
              borderColor: '#161a1f',
              borderWidth: 2
            },
            // 鼠标悬停圆心内容
            emphasis: {
              label: {
                show: false,
                fontSize: '40',
                fontWeight: 'bold'
              }
            },
            data: [
              { value: 100, name: '1' },
              { value: 100, name: '2' },
              { value: 100, name: '1' },
              { value: 100, name: '2' },
              { value: 100, name: '1' },
              { value: 100, name: '2' }

            ]
          }
        ]
      }

      option && myChart.setOption(option)
    })

    return {}
  },
  methods: {

  }
}
</script>

<style lang="scss" scoped>
.main{
  width: 100px;
  height: 100px
}
.text{
  width: 100px;
  margin-top: 10px;
  color: #999;
  span{
    color: #ddd;
    font-weight: 600;
  }
}
</Style>
